/*
  学习目标：使用useEffect触发卸载时的钩子函数
  需求1. 挂载时监听窗口的改变事件
  需求2 卸载时取消监听 的窗口改变事件
*/

import React, { useState } from 'react';
import { useEffect } from 'react';

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  const resizeFn = () => {
    console.log('窗口改变了');
  };

  // 💥 注意：逻辑过多的时候，分开来写。如果逻辑比较少，建议合起来写
  useEffect(() => {
    // 监听窗口
    window.addEventListener('resize', resizeFn);

    //  卸载事件
    // useEffect接收的回调函数中，返回一个💥同步函数，这个同步函数会在卸载时执行。
    return () => {
      // 用途：卸载时，清除动作
      window.removeEventListener('resize', resizeFn);
    };
  }, []);

  // 在子组件中挂载时监听窗口改变事件
  return <div>我是子组件</div>;
}
